<template>
  <div v-loading="pageLoad" class="padding_10">
    <!-- 选择类型新增 -->
    <div v-if="interfaceBool == 0">
      <div class="grid_5_column">
        <div
          v-for="(item, index) of serviceItem"
          :key="index"
          class="btn_items"
          @click="btnClick(item)"
        >
          <div>
            <img v-if="item.srcImg" class="img_style" :src="item.srcImg" />
            <div v-else class="def_style">
              {{ item.defaultSrc }}
            </div>
          </div>
          <div style="margin-left: 15px">
            <div class="flex_y_center">
              <div class="title_style">{{ item.ass_name }}</div>
            </div>
            <div class="introduce_style">{{ item.ass_desc }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 储值卡 -->
    <Card v-if="interfaceBool == 1" @send="showMain" />
    <!-- 满减送，礼包 -->
    <Gift v-else-if="interfaceBool == 2" @send="showMain" />
    <!-- 优惠券 -->
    <Discount v-else-if="interfaceBool == 3" @send="showMain" />
    <!-- 折扣 -->
    <Fold v-else-if="interfaceBool == 4" @send="showMain" />
    <!-- 赠品 -->
    <Giveaway v-else-if="interfaceBool == 5" @send="showMain" />
    <!-- 微信公众号 -->
    <Nopublic v-else-if="interfaceBool == 6" @send="showMain" />
    <!-- 企业微信 -->
    <Enterprise v-else-if="interfaceBool == 7" @send="showMain" />
    <!-- 分销员 -->
    <Distributor v-else-if="interfaceBool == 8" @send="showMain" />
    <!-- 微信小程序 -->
    <Applets v-else-if="interfaceBool == 9" @send="showMain" />
    <!-- 有赞商城 -->
    <Mallyouzan v-else-if="interfaceBool == 10" :o-id="id" @send="showMain" />
    <!-- 成长管理 -->
    <Growth
      v-else-if="interfaceBool == 11"
      :is-open="isOpen"
      :o-id="id"
      @send="showMain"
    />
    <!-- 权益卡1 -->
    <Equitycard v-else-if="interfaceBool == 12" @send="showMain" />
    <!-- 随访问答 -->
    <Track v-else-if="interfaceBool == 13" @send="showMain" />
  </div>
</template>

<script>
  import { getServiceList } from '@/api/service'
  import { checkGrowthApp } from '@/api/punch'

  export default {
    components: {
      Card: () => import('./components/card.vue'), // 储值
      Growth: () => import('./components/Growth.vue'), // 成长管理

      Gift: () => import('./components/gift.vue'), // 满减送/礼包
      Discount: () => import('./components/discount.vue'), // 优惠券
      Fold: () => import('./components/fold.vue'), // 折扣
      Giveaway: () => import('./components/giveaway.vue'), // 赠品
      Equitycard: () => import('./components/equitycard.vue'), // 权益卡
      Nopublic: () => import('./components/nopublic.vue'), // 微信公众号
      Enterprise: () => import('./components/enterprise.vue'), // 企业微信
      Distributor: () => import('./components/distributor.vue'), // 分销员
      Applets: () => import('./components/applets.vue'), // 微信小程序
      Mallyouzan: () => import('./components/mallyouzan.vue'), // 有赞商城
      Track: () => import('./components/track.vue'), // 有赞商城
    },
    data() {
      return {
        pageLoad: false, // 界面显示隐藏
        interfaceBool: 0,

        serviceItem: [],
        id: '',
        isOpen: true,
      }
    },
    created() {
      this.getApplica()
    },
    methods: {
      // 获取应用列表
      getApplica() {
        this.pageLoad = true
        const data = {
          code: window.location.pathname.substring(1),
        }
        getServiceList(data).then((res) => {
          this.serviceItem = res.data
          for (let item of res.data) {
            let first = ''
            // 判断当前是否有自带图片，没有的话默认设置第一个字
            if (item.ass_logo == '') {
              first = item.ass_name.slice(0, 1)
            }
            item.defaultSrc = first
          }
          this.pageLoad = false
        })
      },
      // 根据用户点击的不同跳转路由界面
      btnClick(item) {
        switch (item.ass_name) {
          case '用户储值':
            this.interfaceBool = 1
            break
          case '满减/送':
            this.interfaceBool = 2
            break
          case '优惠券':
            this.interfaceBool = 3
            break
          case '限时折扣':
            // this.interfaceBool = 4
            this.$message.warning('暂不支持' + item.ass_name + '服务')
            break
          case '赠品':
            this.interfaceBool = 5
            break
          case '微信公众号':
            this.interfaceBool = 6
            break
          case '企业微信':
            this.interfaceBool = 7
            break
          case '分销员':
            this.interfaceBool = 8
            break
          case '微信小程序':
            this.interfaceBool = 9
            break
          case '有赞商城':
            this.id = item.id
            this.interfaceBool = 10
            break
          case '随访问答':
            this.id = item.id
            this.interfaceBool = 13
            break
          case '成长管理':
            checkGrowthApp().then((res) => {
              this.isOpen = res.data.open
              this.interfaceBool = 11
            })
            break
          case '权益卡':
            this.interfaceBool = 12
            break
        }
      },
      showMain() {
        this.interfaceBool = 0
      },
    },
  }
</script>

<style scoped>
  .flex_y_center {
    display: flex;
    align-items: center;
  }
  .grid_5_column {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 10px;
  }

  .btn_items {
    padding: 10px;
    border-radius: 10px;
    background-color: rgba(204, 204, 204, 0.137);
    cursor: pointer;
    transition: 0.5s;
    display: flex;
    align-items: center;
  }
  .btn_items:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .img_style {
    width: 50px;
    height: 50px;
  }
  .def_style {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 22px;
    font-weight: 600;
    background-color: lightblue;
    border-radius: 5px;
  }
  .title_style {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
  }
  .introduce_style {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
</style>
